<template>
  <div class="page16">
    <div class="contant fadeInDown">
      <p>快看，这里是星河中的<span class="yellowfont">“资讯空间”</span></p>
      <p>2022年，您一共看过<span class="yellowfont">{{data.viewEmp ? data.viewEmp:0 }}</span>篇新闻动态，更关心的是<span class="yellowfont">{{data.columnName}}</span>栏目。</p>
      <p></p>
      <p> 在您的航程中，美好的未来会更加触手可及。</p>
    </div>
    <div class="img1 ">
      <!-- animate__backInUp -->
      <div class="airship">
        <img class="animate__backInUp " src="../../assets/images/bill2022/16/people.png">
      </div>

    </div>
  </div>
</template>
  
  <script>

export default {
  props: {
    data: {
      type: Object,
      default: () => { },
    },
  },
  components: {
  },
  // 定义属性
  data () {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
}
  </script>
  
  <style lang='less' scoped>
  .page16{
    display: flex;
  align-items: center;
  flex-direction: column;
  .contant {
    margin-top: 3rem;
    width: 38.5rem;
    text-align: left;
    font-size: 2.1rem;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 400;
    color: #fefefe;
    line-height: 3.2rem;

    .yellowfont {
      color: #fbd858;
      font-weight: 600;
      font-size: 2.25rem;
      padding-right: 0.4rem;
    }
  }
.img1 {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 47rem;
  background: url(../../assets/images/bill2022/16/centenr.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  position: absolute;
  .airship {
    position: absolute;
    bottom: 0.5rem;
    left: 9rem;
    animation: slideUp 1s ease-in-out;
      -webkit-animation: slideUp 1s ease-in-out;
      -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
      -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
      -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
    img {
      width: 9.9375rem;
      height: 19rem;
    }
  }
  @keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }

      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    @-webkit-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }

    @-moz-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    @-o-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
    @-ms-keyframes slideUp {
      0% {
        transform: translateY(0);
        transform: scale3d(1);
      }
      100% {
        transform: translateY(1rem);
        transform: scale3d(1.2);
      }
    }
}
}
.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__backInUp {
  animation: backInUp 2s ease-in-out;
  animation-iteration-count: 1;
}
@keyframes backInUp {
  0% {
    -webkit-transform: translatex(-2000px) translatey(2000px) scale(0.4);
    transform: translatex(-2000px) translatey(2000px) scale(0.4);
    opacity: 0.7;
  }

  to {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

</style>